<template>
  <div class="p-[10px]">
    <n-card title="消耗统计" size="huge" hoverable>
      <!-- 搜索 -->
      <n-form inline :label-width="80" :model="formValue">
        <n-form-item label="令牌名称" path="token_name">
          <n-input
            v-model:value="formValue.token_name"
            placeholder="令牌名称"
          />
        </n-form-item>
        <n-form-item label="模型名称" path="model_name">
          <n-input
            v-model:value="formValue.model_name"
            placeholder="模型名称"
          />
        </n-form-item>
        <n-form-item label="起止时间" path="datetimerange">
          <n-date-picker
            v-model:value="formValue.datetimerange"
            type="daterange"
            clearable
          />
        </n-form-item>
        <n-form-item>
          <n-button type="primary" @click="getLog"> 查询 </n-button>
        </n-form-item>
      </n-form>
      <n-row class="!mb-2">
        <n-col :span="4">
          <n-statistic label="总消耗额度">￥{{ (stat.quota/500000).toFixed(2) }}</n-statistic>
        </n-col>
        <n-col :span="4">
          <n-statistic label="RPM"> {{ stat.rpm }} </n-statistic>
        </n-col>
        <n-col :span="4">
          <n-statistic label="TPM"> {{ stat.tpm }} </n-statistic>
        </n-col>
      </n-row>
      <n-data-table
        :columns="columns"
        :data="data"
        :bordered="false"
        :pagination="true"
      />
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { fetchLog, fetchLogStat } from "@/api/index";
import {
  NButton,
  NCard,
  NCol,
  NDataTable,
  NDatePicker,
  NForm,
  NFormItem,
  NInput,
  NRow,
  NStatistic,
  NTag,
} from "naive-ui";
import { defineProps, h, onMounted, ref } from "vue";

const props = defineProps();
const formValue = ref({
  token_name: "",
  model_name: "",
  datetimerange: "",

  p: 1,
  page_size: 99999,
});

const data = ref([]);
const stat = ref({});
const columns = [
  {
    title: "时间",
    key: "created_at",
    render(record) {
      return (new Date(record.created_at * 1000)).toLocaleString().replaceAll("/","-")
      // dayjs(record.created_at * 1000).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  {
    title: "令牌",
    key: "token_name",
    render(record) {
      return h(
        NTag,
        {
          type: "success",
        },
        {
          default: () => record["token_name"] || "APIKEY",
        }
      );
    },
  },
  {
    title: "类型",
    key: "type",
    render(record) {
      return record["type"] == 1 ? "充值" : "消费";
    },
  },
  {
    title: "模型",
    key: "model_name",
    render(record) {
      return h(
        NTag,
        {
          type: "info",
        },
        {
          default: () => record["model_name"] || "APIKEY",
        }
      );
    },
  },
  {
    title: "用时/首字",
    key: "use_time",
    render(record) {
      return h(
        NTag,
        {
          type: "info",
        },
        {
          default: () =>
            `${record["use_time"]}s / ${record["is_stream"] ? "流" : "非流"}`,
        }
      );
    },
  },
  {
    title: "提示",
    key: "prompt_tokens",
  },
  {
    title: "补全",
    key: "completion_tokens",
  },
  {
    title: "花费",
    key: "quota",
    render(record, abc) {
      return `￥${record.quota / 500000}`;
    },
  },
  {
    title: "详情",
    key: "content",
  },
];

const getLog = async () => {
  // 查询条件
  const params = {
    ...formValue.value,
    start_timestamp: formValue.value.datetimerange
      ? formValue.value.datetimerange[0]
      : "",
    end_timestamp: formValue.value.datetimerange
      ? formValue.value.datetimerange[1]
      : "",
    datetimerange: undefined,
  };
  const res = await fetchLog(params);
  const res1 = await fetchLogStat(params);
  data.value = res.data.items;
  stat.value = res1.data;
};

onMounted(() => {
  getLog();
});
</script>
